<template >
    <div class="page_wrap">
        <div class="form_wrap">
            <van-row>
                <van-col span="24" style="font-size: 30px;text-align: center;margin: 0 0  30px 0;">{{ pageName }}</van-col>
            </van-row>
            <hr style="margin-top: -20px;">
            <van-row style="padding: 20px 15px;margin-top: -10px;" justify="space-between">
                <van-col span="11"><van-button plain type="primary" style="width:95%"
                        @click="changePageName('求职人员登录')">求职人员登录</van-button></van-col>
                <van-col span="11"><van-button plain type="primary" style="width:95%"
                        @click="changePageName('招聘人员登录')">招聘人员登录</van-button></van-col>
            </van-row>
            <van-form ref="loginFormRef">
                <van-cell-group inset>
                    <!-- 通过 pattern 进行正则校验 -->
                    <van-field v-model="formData.email" label="邮箱" name="emailPattern" placeholder="请输入邮箱"
                        :rules="[{ pattern: emailPattern, message: '请输入正确邮箱' }]" />
                    <!-- 通过 validator 进行函数校验 -->
                    <van-field v-model="formData.password" label="密码" name="passwordValidator" placeholder="请输入密码"
                        autocomplete="false" type="password"
                        :rules="[{ validator: passwordValidator, message: '密码应为字母，数字，特殊符号，两种及以上组合，8-16位字符串' }]" />
                </van-cell-group>
                <van-row style="padding: 20px 15px;margin-top: 10px;">
                    <van-col span="24">
                        <p class="forgetPassword" align="right" style="cursor: pointer;"
                            @click="router.push('/resetpassword')">忘记密码？</p>
                    </van-col>
                </van-row>
                <div style="margin-top: -30px;padding:0 15px; 0 15px">
                    <van-button round block type="primary" @click="handleLogin">登录 </van-button>
                    <van-button round block plain style="margin-top: 10px;" @click="router.push('/register')">注册</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { showFailToast, showLoadingToast } from 'vant';
import router from '@/router';
import { login } from '@/utils/request';
import store from '@/store';

const loginFormRef = ref();
const pageName = ref('求职人员登录');
const formData = reactive({
    email: '',
    password: '',
    roleName: '求职者'
})
// 校验函数返回 true 表示校验通过，false 表示不通过
const emailPattern = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
const passwordValidator = (val) => /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{6,20}$/.test(val);

function changePageName(name) {
    pageName.value = name
    if ('求职人员登录' == name) {
        formData.roleName = '求职者'
    } else {
        formData.roleName = '招聘者'
    }
}

function handleLogin() {
    loginFormRef.value?.validate(['emailPattern', 'passwordValidator']).then(() => {
        // 验证通过
        login(formData).then(res => {
            if (res.data.code == 200) {
                // 响应成功
                store.commit('setToken', res.data.data.token)
                store.commit('setUserInfo', res.data.data)
                localStorage.setItem("token", res.data.data.token)
                localStorage.setItem('userInfo', JSON.stringify(res.data.data))
                localStorage.removeItem("refresh")
                router.push("/index")
            } else {
                // 响应失败
                showFailToast(res.data.message || '服务器出错')
            }
        })
    }).catch((err) => {
        //验证失败
        showFailToast('请正确填写信息');
    })
}
</script>
<style scoped>
.page_wrap {
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
    background-color: rgb(42, 116, 212);
    display: flex;
}

.form_wrap {
    margin: auto ;
    background-color: aliceblue;
    padding: 15px;
    border-radius: 20px;
}

.forgetPassword {
    margin-top: -25px;
    line-height: 40px;
    font-size: 14px;
    color: rgb(11, 114, 231);
}
</style>